<script setup lang="ts">
import { getData } from "@/api/book";
import { getCurrentInstance, onMounted, ref } from "vue";
import * as echarts from "echarts";
import { ElMessage } from "element-plus";

defineOptions({
  name: "Welcome"
});

const table_data = ref([]);
const getDatas = async () => {
  const res = await getData();
  if (res.code == "200") {
    table_data.value = res.data;
  } else {
    ElMessage.error("获取数据失败~");
  }
};
getDatas();
const input_axis = ref("");
const input_series = ref(0);
const create_axis = () => {
  //3.初始化实例对象 echarts.init(dom容器)
  var data_xAxis = [];
  var data_series = [];
  var data_legend = ["数量"];
  console.log("table_data.value" + table_data.value);
  for (var i = 0; i < table_data.value.length; i++) {
    data_xAxis.push(table_data.value[i].axis);
    data_series.push(table_data.value[i].series);
  }
  // 获取dom节点
  var myChart = echarts.init(document.getElementById("myChart"));
  //4.指定配置项和数据
  var option = {
    title: {
      text: "数据分析"
    },
    tooltip: {},
    legend: {
      data: data_legend
    },
    xAxis: {
      data: data_xAxis
    },
    yAxis: {},
    series: [
      {
        name: "数量",
        type: "bar",
        data: data_series
      }
    ]
  };
  //5.将配置项设置给echarts实例对象，使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
};

const deleteItemByIndex = row => {
  var index = table_data.value.findIndex(item => item.id == row.id);
  table_data.value.splice(index, 1);
};

const insertData = () => {
  getDatas();
};
</script>

<template>
  <div>
    <el-container>
      <div class="container">
        <div class="left-grid">
          <el-card>
            <el-row>
              <el-form>
                <el-form-item label="横坐标">
                  <el-input v-model="input_axis"></el-input>
                </el-form-item>
                <el-form-item label="纵坐标">
                  <el-input v-model="input_series"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="insertData">重置</el-button>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="create_axis"
                    >点击生成表格</el-button
                  >
                </el-form-item>
              </el-form>
            </el-row>
          </el-card>
          <el-card>
            <el-row>
              <el-table
                :data="table_data"
                :show-header="true"
                :max-height="350"
                stripe
              >
                <el-table-column type="index" label="序号" width="100%">
                </el-table-column>
                <el-table-column prop="axis" label="横坐标"></el-table-column>
                <el-table-column prop="series" label="纵坐标"></el-table-column>
                <el-table-column label="操作">
                  <template #default="{ row }">
                    <el-button type="danger" @click="deleteItemByIndex(row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-row>
          </el-card>
        </div>
        <div class="right-grid" ref="myChart" id="myChart"></div>
      </div>
    </el-container>
  </div>
</template>

<style scoped>
.container {
  display: grid;
  grid-template-columns: 35% 65%;
  width: 100%;
  height: 80vh;
}

.left-grid {
  background-color: #f0f0f0;
  border-radius: 2%;
  padding: 20px;
  height: 100%;
}

.right-grid {
  background-color: #add0ec;
  border-radius: 2%;
  padding: 20px;
  height: 100%;
}

.grid-content1 {
  background-color: rgb(44, 143, 121);

  border-radius: 4px;

  height: 100vh;

  width: 35vw;
}

.grid-content2 {
  background-color: rgb(44, 143, 121);

  border-radius: 4px;

  height: 100vh;

  width: 65vw;
}

.bg-purple {
  background: #7e2970;
}
.bg-purple-light {
  background: #071c4d;
}
</style>
